<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: rgb(128,255,255);
        }
        .box{
            width: 900px;
            margin:100px auto;
            background-color: white;
            border-radius: 30px;
        }
        .itemBox {
            width: 30%;
            margin-left: 2.5%;
            margin-top: 20px;
            text-align: center;
            >span{
                font-size: 24px;
                font-weight: bolder;

            }

            img{
                border: 1px solid rgb(128,255,255);
                width: 100%;
                height: 230px;
            }
        }
        .title{
            display: flex;
            margin: 20px;
            >span{
                font-size: 22px;
                color: gray;
            }
        }
        .bodyBox{
            display: flex;
            flex-wrap: wrap;
        }
        .itemBox a{
            text-decoration: none;
            font-size: 16px;
            color: blue;
        }
        .itemBox a:active{
            text-decoration: none;
            font-size: 16px;
            color: orange;
        }
        .itemBox a:visited{
            text-decoration: none;
            font-size: 16px;
            color: deeppink;
        }
        .foot{
            text-align: right;
        }
    </style>
</head>
<body>

<script>
    var msg="${msg}";
    if(msg=="1"){
        alert("投票成功！");
    }else if(msg=="0"){
        alert("投票失败！");
    }
</script>

<div class="box">
    <div class="title">
        <span>活动名称：</span>
        <span>喜爱歌手</span>
        <form action="singger?type=all" method="post">
            姓名:<input type="text" name="singerName"/>
            性别:<select name="sex">
                    <option></option>
                    <option>男</option>
                    <option>女</option>
                </select>
            票数:从<input type="text" style="width: 30px" name="piaoshu1"/>
                到
                <input type="text" style="width: 30px" name="piaoshu2"/>
            <input type="submit" value="搜索"/>
        </form>
    </div>
    <div class="bodyBox">
    <c:forEach items="${slist }" var="singger">
        <div class="itemBox">
            <span>${singger.singerName}</span>
            <img src="${singger.img}" alt="">
            <div>
                <span>${singger.piaoShu}票</span>
                <a href="javascript:void(0)" onclick="toupiao('${singger.singerName}','${singger.singerId}');">点击投票</a>
            </div>
        </div>
    </c:forEach>
    </div>
    <div class="foot">
        第${page}页/
        共${allPage}页 &nbsp;&nbsp;&nbsp;&nbsp;
        <a href="javascript:void(0)" onclick="fenye('first');">首页</a>
        <a href="javascript:void(0)" onclick="fenye('shang');">上一页</a>
        <a href="javascript:void(0)" onclick="fenye('xia');">下一页</a>
        <a href="javascript:void(0)" onclick="fenye('end');">尾页</a>
    </div>
</div>

<script>
    //分页
    function fenye(type) {
        var page = parseInt("${page}");
        const allPages = parseInt("${allPage}");

        if (type === "first") {
            page = 1;
        } else if (type === "shang") {
            if (page === 1) {
                alert("当前已经是首页");
                return;
            }
            page -= 1;
        } else if (type === "xia") {
            if (page >= allPages) {
                alert("当前已经是尾页");
                return;
            }
            page += 1;
        } else if (type === "end") {
            page = allPages;
        }

        window.location.href = "singger?type=all&page=" + page;
    }

    function toupiao(singername,singerid){
        var flag=confirm("确定给"+singername+"投票吗?");
        if(flag==true){
            window.location.href="singger?type=toupiao&sid="+singerid;
        }
    }
</script>
</body>
</html>